import  { useEffect, useState } from 'react';
import { Card, Select, Button, Space, Table, Modal } from "antd"
import { SearchOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd';
import { getBrandList } from "../api/brand"
import { state as states } from "@/stores/Merchant"
import { useSnapshot } from 'valtio'
import PrinterList from "./PrinterList"
//定义表格数据
const Brand = () => {
    const state = useSnapshot(states)

    interface DataType {
        key: "",
        shopName: "",
        brandname: string,
        areaName: "",
        shopAddress: string,
        name: "",
        phone: "",
        status: string,
        bindShop: "",
    }
    let [searchs, setSearchs] = useState({
        brandname: "",
        areaName: "",
        shopName: "",
    })

    let search = () => {
        state.getData3(searchs)
    }



    let [brand, setBrand] = useState([])
    let getBrand = () => {
        getBrandList({}).then((res: any) => {
            setBrand(res.brandNameList)


        })
    }
    useEffect(() => {
        getBrand()
    }, [])

    let columns: TableProps<DataType>['columns'] = [

        {
            title: "店铺名称",
            dataIndex: 'shopName',
            key: 'shopName',
        },
        {
            title: "所属分区",
            dataIndex: 'areaName',
            key: 'areaName',
        },
        {
            title: "所属品牌",
            dataIndex: 'brandname',
            key: 'brandname',
        },


        {
            title: "绑定打印机",

            render: (_, record) => (
                <Space size="middle">
                    <a onClick={()=>{
                        setModalOpen(true)
                        setObj(record)
                        state.setShopName(record.shopName)
                    }}>查看详情</a>
                </Space>
            ),
        },
        {
            title: "操作",

            render: () => (
                <Space size="middle">
                    <a>打印机绑定</a>
                </Space>
            ),
        },


    ]



    //查看绑定 
    const [modalOpen, setModalOpen] = useState<boolean>(false);
    const [obj, setObj] = useState<Record<string,any>>({})
  



    return (
        <div className='m=auto w-[100%] m-t-5'>
            <Card title='店铺筛选' className='m-auto  w-[90%] rounded-none p-0'>
                <div className='flex justify-between  p-5 w-200'>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>品牌名称：</p>
                        <Select
                            className='rounded-none'
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={(e) => {
                                setSearchs({
                                    ...searchs,
                                    brandname: e
                                })
                            }

                            }
                            options={brand}
                        />
                    </div>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>所属分区：</p>
                        <Select
                            className='rounded-none'
                            defaultValue="请选择"
                            style={{ width: 120 }}
                            onChange={(e) => {
                                setSearchs({
                                    ...searchs,
                                    areaName: e
                                })
                            }}
                            options={[...state.areaCate]}
                        />
                    </div>
                    <div style={
                        { display: "flex", height: "30px", lineHeight: '30px', padding: 0 }
                    }
                    >
                        <p className='m-0'>店铺名称：</p>
                        <Select
                            className='rounded-none'
                            defaultValue="请选择"
                            style={{ width: 120, marginRight: 30 }}
                            onChange={(e) => {
                                setSearchs({
                                    ...searchs,
                                    shopName: e
                                })
                            }}
                            options={[...state.shopCate]}
                        />
                        <Button type="primary" className='rounded-none' icon={<SearchOutlined />}
                            onClick={async () => {

                                await search()

                            }}
                        >查询</Button>
                    </div>
                </div>            </Card >            <Card className='w-[90%] m-auto mt-5 rounded-none'>                
                    <div className='flex justify-between items-center'>
                    <p>共有{state.shopList.length}条记录</p>
                </div>
                <Table className='rounded-none' columns={[...columns]}
                    bordered
                    dataSource={state.shopList}
                    pagination={{
                        defaultPageSize: 5, // 设置每页默认显示的行数
                        total: state.shopList.length,
                        showSizeChanger: true, // 不显示每页显示数量的选择器
                        showQuickJumper: false, // 不显示快速跳转到某一页的输入框
                        pageSizeOptions: ['5', '10', '20'],
                    }}
                />
            </Card>
            <Modal
                width={1000}
                centered
                open={modalOpen}
                onOk={() => {
                    setModalOpen(false)
                }}
                onCancel={() => {
                    setModalOpen(false)

                }}
                footer={""}
            >
                <PrinterList
                    obj={obj}
                ></PrinterList>
            </Modal>


        </div >
    );
};
export default Brand;